<template>
    <Card>
        <Row slot="title">
            <Col span="6">
            <Select v-model="choseYear" style="width: 150px;text-align: center" clearable placeholder="选择年份">
                <Option v-for="item in years" :value="item" :key="item" >{{ item}}</Option>
            </Select>
            </Col>
            <Col span="4" offset="10">
            <Upload
                    action="https://nongyun.hz-hyf.com/api/v1/tools/read_excels"
                    name="file"
                    :on-success="uploadSuccess"
                    :on-error="uploadError"
                    :show-upload-list="false">
                <Button type="info" icon="plus">上传土壤测试数据</Button>
            </Upload>
            </Col>
            <Col span="4">
            <Button @click="download">下载模版表格</Button>
            </Col>
        </Row>

        <Table id="table" border :columns="columns" :data="data.filter(function(item){
            if(choseYear=='全部'||choseYear=='')
              return item;
          return item.year==choseYear;
        })"></Table>
        <br>
        <div align="right">
            <Page :total="10" show-elevator></Page>
        </div>
    </Card>

</template>
<style scoped>
    body {
        background-color: #ff0000;
    }

    #table .ivu-table-header {
        overflow: auto !important;
    }
</style>
<script>
    export default {
        data() {
            return {
                choseYear: '',//选择年份
                breakConnect: false,
                lowNetSpeed: false,
                modal1: false,
                newFert: {
                    name: '',
                    n: '',
                    p: '',
                    k: ''
                },
                years: ['全部',2014,2015,2016,2017],
                columns: [
//                    {
//                        title: '年份',
//                        key: 'year',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '农场ID',
//                        key: 'farm_id',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '经度',
//                        key: 'x',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '纬度',
//                        key: 'y',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '有机质',
//                        key: 'om',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: 'PH 值',
//                        key: 'ph',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '碱解氮',
//                        key: 'hn',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '铵态氮',
//                        key: 'an',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '硝态氮',
//                        key: 'nn',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '有效磷',
//                        key: 'p',
//                        align: 'center',
//                        width: 100
//
//                    },
//                    {
//                        title: '速效钾',
//                        align: 'center',
//                        key: 'k',
//                        width: 100
//                    },
////                    {
////                        title: '操作',
////                        align: 'center',
////                        width: 180,
////                        key: 'options'
////                    }
                ],
                data: [
//                    {
//                        year: 2017,
//                        farm_id: 1,
//                        x: '223.445655',
//                        y: '32.456321',
//                        om: '31',
//                        ph: '31',
//                        hn: '33',
//                        an: '3131',
//                        nn: '312',
//                        p: '342',
//                        k: '55',
////                        options: '编辑'
//                    }
                ]
            }
        },
        methods: {
            uploadSuccess: function (response, file, fileList) {
                console.log("上传成功",response)
                if(response.error_code==1){
                    this.$Modal.error({
                        title: '上传失败',
                        content: '请检查上传文件是否与模版表格一致！'
                    });
                    return;
                }
                this.columns=response.data.keys;
                this.data=response.data.res;
                this.$Modal.success({
                    title:'上传成功!',
                    content:'成功上传!'
                })
            },
            uploadError: function (error, file, fileList) {
                console.log(error)
                this.$Message.error(response.message)
            },
            download:function () {
                window.open("https://nongyun.hz-hyf.com/api/v1/tools/download_template?type=soil_test");
            }
        }
    }
</script>